<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图书系统</title>
	<link rel="stylesheet" href="js/boks.js">
	<style type="text/css">
		.div{
			height:80px;
			width:100%;
			background:url(img/logo.jpg)no-repeat 0 0/100% 100%;
		}
		.loging{background:url(img/1.jpg)no-repeat 0 0/100% 100%;height: 200px;width: 400px;position: absolute;top:0;bottom: 0;left: 0;right: 0;margin:auto;color: white;font-size: 24px;border-radius: 20px;
		}
		.loging button{
			width: 70px; height: 29px;margin:0 5%;
		}
		.loging p{text-align: center;line-height: 50px;}
		.loging input{
			height: 27px;
		}
		.tables{
			width: 100%;margin:auto;margin-top: 3%;
		}
		.tables th{
			width: 1%;height: 29px;
		}
		.back{
			background: url(img/logo.jpg) no-repeat 0 0/100% 100%;
		}
		h2{
			color: white;
		}
		.boxs{background: url(img/2.jpg) no-repeat 0 0/100% 100%;color: white;
			width: 600px;margin:auto; font-size: 22px;
		}
		.boxs tr{height: 33.6px;}
		.boxs input{
			height: 24px;
		}
		#wrap td{
			text-align: center;
		}
		.tables{
			display: none;
		}
		#type-in{display: flex; display: none;
			width: 600px; height: 315px;margin:auto;
		}
		#type-in tr td button{
			height: 29px;width: 70px;
		}
		#wrap td img{ width: 80px; }
	</style>
</head>
<body>
	<div class="div">
		<h1 style="line-height: 80px;">灵越指间管理系统</h1>
	</div>
	<div class="loging">
		<p style="margin-top: 10%">用户：
				<input id="inp1" type="text"  autofocus="autofocus"  name="username">
		</p>
		<p>密码：
				<input id="inp2" type="password"name="password">
		</p>
		<p><button id="btn">登陆</button>
		<button id="btns">注册</button></p>
	</div>

				<!-- content -->
<div style="width: 70%;margin:auto">
	<table class="tables" border="1" cellspacing="0">
		<thead>
			<th class="back" colspan="7"><h2 class="add">BooK系统</h2></th>
			<tr>
				<th>图书</th>
				<th>书名</th>
				<th>作者</th>
				<th>介绍</th>
				<th>上架时间</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="wrap">

		</tbody>
		<tfoot>
			<tr>
				<th align="right" colspan="7"><button id="flush" style="margin-right: 29px">刷新</button></th>
			</tr>
		</tfoot>
	</table>
</div>
			<!-- 内容录入 -->
<div id="type-in">
	<table class="boxs" align="center">
		<tr>
			<td align="right">图书：</td>
			<td><input id="v1"  autofocus="autofocus" type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">书名：</td>
			<td><input id="v2"  type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">作者：</td>
			<td><input  id="v3" type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">介绍：</td>
			<td><input id="v4"  type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">上架时间：</td>
			<td><input class="v5"  type="text" name=""></td>
		</tr>
		<tr>
			<td align="right">价格：</td>
			<td><input  id="v6" type="text" name=""></td>
		</tr>
		<tr>
			<td align="center" colspan="7"><button id="boxs-btn">添加</button></td>
		</tr>
	</table>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$("#btns").on("click",function(){
		var as={
			username:$("#inp1").val(),
			password:$("#inp2").val()
		}
		$.ajax({
			url:"http://localhost:2403/users",
			type:"post",
			data:as,
			success:function(a){
				alert("注册成功,请登录")
			},
			error:function(e){
				alert("用户名存在,请更改！")
			}
		})
	})

	$("#btn").on("click",function(){
		(function(){
				$.get("http://localhost:2403/users",function(data){
				// console.log(data)
				for (var i = 0; i < data.length; i++) {
					if ($("#inp1").val()==data[i].username) {
						$(".loging").css("display","none")
						$(".tables").css("display","block")
						// console.log(data)
						return false
					}else if ($("#inp1").val()!=data[i].username) {}{
						alert("此用户不存在！")
						// console.log(data)
						return false
					}
				}
				
			})
		})()
		
	})

	// ---------------------------------------------------------------
				// 后台添加
	$('.add').on("click",function(){
		$("#type-in").css("display","block").css("margin-top","3%")
	})
	$("#boxs-btn").on("click",function(){
		// console.log($(".v5").val())
		var zz={
			image:$("#v1").val(),
			name:$("#v2").val(),
			author:$("#v3").val(),
			tittle:$("#v4").val(),
			date:$(".v5").val(),
			many:$("#v6").val()
		}
		$.ajax({
			url:"http://localhost:2403/books",
			type:"post",
			data:zz,
			success:function(data){
				// console.log(data)
				$("<tr><td><img src="+data.image+"></td><td>"+data.name+"</td><td>"+data.author+"</td><td>"+data.tittle+"</td><td>"+data.date+"</td><td>"+data.many+"</td><td><button class='asd'>"+"删除"+"<span style='display:none'>"+data.id+"</span></button><button class='asds'>"+"更改"+"</button></td></tr>").appendTo($("#wrap"))
			}
		})
		$("#wrap").on("click",".asd",function(){
				$(this).parents("tr").remove()
				$.ajax({
					url:"http://localhost:2403/books/"+$(this).children("span").html(),
					type:"delete",
					success:function(date){
						console.log(1)
					},
					error:function(e){
						console.log(e)
					}
				})
		})

		// 点击更改
		$("#wrap").on("click",".asds",function(){
			$(this).parents("tr").remove()
			$("#type-in").css("display","block")
			$.ajax({
				url:"http://localhost:2403/books/"+$(this).children("span").html(),
					type:"put",
					success:function(date){
						console.log($(this).children("span").html())
					},
					error:function(e){
						console.log(e)
					}
			})
			return false
		})
		$("#type-in").css("display","none")
	})



	// 点击刷新载入内容
	$("#flush").on("click",function(){
		$("#wrap").children("tr").remove()
		$.get("http://localhost:2403/books",function(data){
			for (var i = 0; i < data.length; i++) {
				$("<tr><td><img src="+data[i].image+"></td><td>"+data[i].name+"</td><td>"+data[i].author+"</td><td>"+data[i].tittle+"</td><td>"+data[i].date+"</td><td>"+data[i].many+"</td><td><button class='asd'>"+"删除"+"<span style='display:none'>"+data[i].id+"</span></button><button class='asds'>"+"更改"+"</button></td></tr>").appendTo($("#wrap"))
				$(".asd").on("click",function(){
					$(this).parents("tr").remove()
					$.ajax({
					url:"http://localhost:2403/books/"+$(this).children("span").html(),
					type:"delete",
					success:function(date){
						// console.log(1)
					},
					error:function(e){
						// console.log(e)
					}
				})
				})
				// 点击更改
		// $(".asds").on("click",function(){
		// 	alert(1)
		// 	$(this).parents("tr").remove()
		// 	$("#type-in").css("display","block")
		// 	$.ajax({
		// 		url:"http://localhost:2403/books/"+$(this).children("span").html(),
		// 			type:"put",
		// 			success:function(date){
		// 				console.log(1)
		// 			},
		// 			error:function(e){
		// 				console.log(e)
		// 			}
		// 	})
		// })
			}
		})
	})
</script>
</html>